  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>群星网约车</title>
<link rel="icon" href="../image/carMR.png" type="image/png">
  <style>
	.order-table {
		padding: 40px;
	}
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
<div class="order-table">
	<span>编号查询：</span>
		<el-input v-model="search" placeholder="乘客编号搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<span>状态查询：</span>
	<el-input v-model="searchOrder" placeholder="乘客状态搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
		<el-table :data="orders" style="width: 100%">
			<el-table-column prop="id" label="乘客编号" width="120"></el-table-column>
			<el-table-column prop="username" label="乘客昵称" width="120"></el-table-column>
			<el-table-column prop="phoneNumber" label="手机号" width="150"></el-table-column>
			<el-table-column prop="email" label="邮箱" width="200"></el-table-column>
			<el-table-column prop="createdAt" label="创建时间" width="200"></el-table-column>
			<el-table-column prop="status" label="乘客状态" width="120">
				<template slot-scope="scope">
					<el-tag
							:type="getUserStatusType(scope.row.status)"
							@click="confirmUpdateUserStatus(scope.row)"
					>
						{{ scope.row.status }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalOrders"
				:page-size="pageSize"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 50]"
				@current-change="handlePageChange"
				@size-change="handleSizeChange">
		</el-pagination>
	</div>
</div>


<script>
	// request拦截器，将用户token放入头中
	axios.interceptors.request.use(
			config => {
				let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
				if (token) {
					config.headers['token'] = token;
				}
				return config;
			},
			error => {
				console.log(error);
				return Promise.reject(error);
			}
	);
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
		userId: "",
		userName: "",
		avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', // 默认头像链接
		search: '',
	    searchOrder: '',
		currentPage: 1,
		pageSize: 10,
		totalOrders: 0,
		orders: [
			{ id: '123', username: '小米', phoneNumber: '15115902252' ,createdAt: '2023-01-01 12:00:00',email: '936482013@qq.com', status: '活跃' },
			{ id: '123', username: '小米', phoneNumber: '15115902252' ,createdAt: '2023-01-01 12:00:00',email: '936482013@qq.com', status: '冻结' },
		],
	  statusMap: {  // 在 data 中定义映射关系
		  '冻结': '0',
		  '活跃': '1',
	  }
      }
    },
    methods: {
	fetchOrders() {
		const mappedStatus = this.statusMap[this.searchOrder] || this.searchOrder;
		axios.get(`/user/users/getUserByManager`, {
			params: {
				page: this.currentPage,
				size: this.pageSize,
				keyword: this.search,
				keywordOrder: mappedStatus
			}
		}).then(response => {
			if (response.data.code === 1) {
				console.log("成功获取订单信息");
				const orders = response.data.data.list.map(order => {
					switch (order.status) {
							case '1':
								order.status = '活跃';
								break;
							case '0':
								order.status = '冻结';
								break;
							default:
								order.status = '未知状态'; // 添加默认情况处理
						}
					// 处理发起时间
					if (order.orderDate) {
						order.orderDate = order.orderDate.replace('T', ' ');
					}
					return order;
				});
				this.orders = orders;
				this.totalOrders = response.data.data.total;
			}
		});
	},
	handleSearch() {
		this.currentPage = 1;
		this.fetchOrders();
	},
	handlePageChange(page) {
		this.currentPage = page;
		this.fetchOrders();
	},
	handleSizeChange(size) {
		this.pageSize = size;
		this.currentPage = 1;
		this.fetchOrders();
	},
	getUserStatusType(status) {
		switch (status) {
			case '活跃':
				return 'success';
			case '冻结':
				return 'danger';
			default:
				return '';
		}
	},
	confirmUpdateUserStatus(order) {
		const newStatus = order.status === '活跃' ? '冻结' : '活跃';
		this.$confirm(`确认要将状态修改为${newStatus}吗？`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			this.updateUserStatus(order, newStatus);
		}).catch(() => {
			this.$message.info('取消修改');
		});
	},
	updateUserStatus(order, newStatus) {
		axios.put(`/user/users/updateUserStatus`, {
			id: order.id,
			status: this.statusMap[newStatus]
		}).then(response => {
			if (response.data.code === 1) {
				this.$message.success('状态更新成功');
				order.status = newStatus;
			} else {
				this.$message.error('状态更新失败');
			}
		}).catch(error => {
			console.log(error);
			this.$message.error('状态更新失败');
		});
	},
    },
    mounted(){
		var id=localStorage.getItem('userId');
		this.userId = parseInt(id, 10);
		this.userName = localStorage.getItem('userName');
		this.avatar = localStorage.getItem('pic');
		this.fetchOrders();
    }
  });
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>